<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这次讲的是float</title>
    <style type="text/css">
        div{
            width: 685px;
            height: 560px;
            background-color: pink;
        }
        div img{
            margin: 0px 20px 0px 0px;
            float: left;
        }
    </style>
</head>
<body>
    <p>我们以前学的p标签，作用是单独显示一行。</p>
    <p>行内标签比如说span，它会在同一行内显示。</p>
    <p>这些显示方式被称作标准流</p>
    <p>float会让元素脱离标准流(脱标)</p>
    <p>float的语法 float：left|right </p>

      <p style="font-size: 32px">float常见的用途,请看下面的效果</p>
    <p>float的设计初衷就是用来图文环绕哦</p>
        <p>1.图文环绕</p>

        <div>
            <img src="images/windows.png" title="这是widodws">
            <p>windows中文意思是窗口，windows中文意思是窗口，意思是窗口，windows中文意思是窗口，意思是窗口，windows中文意思是窗口，意思是窗口，windows中文意思是窗口，意思是窗口，windows中文意思是窗口，windows中文意思是窗口windows中文意思是窗口windows中文意思是窗口windows中文意思是窗口windows中文意思是窗口windows中文意思是窗口windows中文意思是窗口windows中文意思是窗口，windows中文意思是窗口，windows中文意思是窗口windows中文意思是窗口</p>
        </div>
</body>
</html>